<template>
    <div class="pages">
        <div class="header">
            <div class="title">
                <div class="name">MMM</div>
                <div class="value">{{ $t('mall.商城') }}</div>
            </div>
            <div class="item" :class="active == 'buy' ? 'active' : ''" @click="change('buy')">
                {{ $t('mall.购买') }}
            </div>
            <div class="item" :class="active == 'sell' ? 'active' : ''" @click="change('sell')">
                {{ $t('mall.出售') }}
            </div>
            <div class="close" v-if="type" @click="back"><i class="el-icon-close"></i></div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        active: {
            type: String,
            default: 'buy'
        },
        type: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        change(value) {
            if (this.active === value) return;
            value = value == 'buy' ? 'mallBuy' : 'mallSell';
            this.$router.replace({
                name: value
            })
        },
        back(){
            this.$router.back()
        }
    }
}
</script>
<style scoped lang="scss">
.header {
    height: 92px;
    padding: 0 170px;
    box-sizing: border-box;
    background: #FCFCFE;
    box-shadow: inset 0px -1px 0px 0px rgba(104, 104, 104, 0.1);
    display: flex;
    position: relative;

    .title {
        height: 92px;
        text-align: center;
        font-weight: bold;
        font-size: 28px;
        color: #2273FF;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .name {}
    }

    .item {
        height: 28px;
        line-height: 28px;
        font-weight: 500;
        font-size: 20px;
        color: #7F7F7F;
        margin: 0 66px;
        padding-top: 40px;
        cursor: pointer;

        &.active {
            position: relative;
            color: #333333;
            font-weight: bold;

            &::after {
                content: "";
                width: 44px;
                height: 6px;
                background: #2273FF;
                border-radius: 3px 3px 3px 3px;
                position: absolute;
                left: 50%;
                bottom: -16px;
                z-index: 2;
                transform: translateX(-50%);
            }

        }
    }

    .close {
        font-size: 30px;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
    }
}
</style>